import React from 'react';

const pageStyle = {
    height: 'calc(100vh - 56px)',
    overflowY: 'auto',
    width: '100%',
    overflowX: 'hidden'
};

export default ({ children }) => {
    // safari上css中的vh高度不正确
    const ref = React.useRef();
    React.useEffect(() => {
        setTimeout(() => {
            if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) {
                ref.current.style.height = `${document.documentElement.clientHeight - 56}px`;
            }
        });
    }, []);

    return (
        <div style={pageStyle} ref={ref}>
            {children}
        </div>
    );
};
